<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test for jQuery validate() plugin</title>
        <link rel="stylesheet" media="screen" href="css/screen.css">
        <script src="../lib/jquery.js"></script>
        <script src="../dist/jquery.validate.js"></script>
        <script>
            // extend the current rules with new groovy ones

            // this one requires the text "buga", we define a default message, too
            $.validator.addMethod("buga", function (value) {
                return value == "buga";
            }, 'Please enter "buga"!');

            // this one requires the value to be the same as the first parameter
            $.validator.methods.equal = function (value, element, param) {
                return value == param;
            };

            $().ready(function () {
                var validator = $("#texttests").bind("invalid-form.validate", function () {
                    $("#summary").html("Your form contains " + validator.numberOfInvalids() + " errors, see details below.");
                }).validate({
                    debug: true,
                    errorElement: "em",
                    errorContainer: $("#warning, #summary"),
                    errorPlacement: function (error, element) {
                        error.appendTo(element.parent("td").next("td"));
                    },
                    success: function (label) {
                        label.text("ok!").addClass("success");
                    },
                    rules: {
                        number: {
                            required: true,
                            minlength: 3,
                            maxlength: 15,
                            number: true
                        },
                        secret: "buga",
                        math: {
                            equal: 11
                        }
                    }
                });

            });
        </script>
        <style>
            form.cmxform {
                width: 50em;
            }
            em.error {
                background:url("images/unchecked.gif") no-repeat 0px 0px;
                padding-left: 16px;
            }
            em.success {
                background:url("images/checked.gif") no-repeat 0px 0px;
                padding-left: 16px;
            }
            form.cmxform label.error {
                margin-left: auto;
                width: 250px;
            }
            em.error {
                color: black;
            }
            #warning {
                display: none;
            }
        </style>
    </head>
    <body>
        <h1 id="banner"><a href="http://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>
        <div id="main">
            <form class="cmxform" id="texttests" method="get" action="foo.html">
                <h2 id="summary"></h2>
                <fieldset>
                    <legend>Example with custom methods and heavily customized error display</legend>
                    <table>
                        <tr>
                            <td>
                                <label for="number">textarea</label>
                            </td>
                            <td>
                                <input id="number" name="number" title="Please enter a number with at least 3 and max 15 characters!">
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <label for="secret">Secret</label>
                            </td>
                            <td>
                                <input name="secret" id="secret">
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <label for="math">7 + 4 =</label>
                            </td>
                            <td>
                                <input id="math" name="math" title="Please enter the correct result!">
                            </td>
                            <td></td>
                        </tr>
                    </table>
                    <input class="submit" type="submit" value="Submit">
                </fieldset>
            </form>
            <h3 id="warning">Your form contains tons of errors! Please try again.</h3>
            <p><a href="index.html">Back to main page</a></p>
        </div>
    </body>
</html>
